<template>
  <div>
    <el-tree :data="dataSource"
             :node-key="scriptItem['nodeKey']"
             :props="defaultProps"
             @node-click="handleNodeClick"
             v-loading.lock="loading"
             @check="checked"
             :show-checkbox="scriptItem['showCheckbox']" highlight-current
             ref="tableTree"></el-tree>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      dataSource: [],
      defaultProps: {
        children: this.scriptItem['children'],
        label: this.scriptItem['title'],
        disabled: function (data) {
          return data['disable']
        }
      },
      loading: true
    }
  },
  mounted () {
    this.onInit()
  },
  methods: {
    handleNodeClick (data) {
      if (!this.scriptItem['showCheckbox']) {
        this.dataForm[this.scriptItem['text']] = []
        this.dataForm[this.scriptItem['text']].push(data.channelId)
      }
    },
    async onInit () {
      this.$refs['tableTree'].setCheckedKeys(this.dataForm[this.scriptItem['text']], true)
      // eslint-disable-next-line valid-typeof
      if (typeof this.scriptItem['dataSourceUrl'] !== '') {
        const { data: res } = await this.$interface.clientReport.getBoardListForBotApi(this.scriptItem['dataSourceUrl'], {})
        this.loading = false
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        if (res.data) {
          this.dataSource = res.data
        }
      }
    },
    checked () {
      if (this.scriptItem['showCheckbox']) {
        this.dataForm[this.scriptItem['text']] = this.$refs['tableTree'].getCheckedKeys()
      }
    }

  }
}
</script>

<style scoped>
</style>
